<template>
  <TnPopup v-model="showPopup"  open-direction="bottom"   height="800" >
    <view  style="width:100%; height:300px; "> 
	
	<view style="width:100%; height:80px; display: flex;
	 justify-content: center; align-items: flex-end;  border: 0px solid red;">
		<TnAvatar url="/static/head.png" />
	</view>
	
	<view style="width:100%; height:30px; letter-spacing: 2px; font-weight: bold; display: flex;
	 justify-content: center; align-items: center;  border: 0px solid red;">
		<b>读心网用户</b>
	</view>
	<view style="border: 0px solid red; letter-spacing: 2px; width:100%; height:50px; font-size:10px;  display: flex; justify-content: center; align-items: flex-start">
		授权绑定手机号, 为您提供更好的服务
	</view>
	
	<view style="width:100%; height:30px; display: flex; justify-content: center; align-items: center; ">
		<TnButton  width="80%" shape="round"  size="xl" open-type="getPhoneNumber"  @getphonenumber="gettPhoneNumber"  >一键登录</TnButton>
	</view>
	<view style="width:100%; height:50px;  font-size:10px; display: flex; justify-content: center; align-items: center">
		 <TnCheckbox v-model="selectValue"  @change="changeClick" size="sm"  border> 
		 已经阅读并同意
		 </TnCheckbox>
		<b @click="privateClick" class="hover-box" >《隐私政策》</b>
		<b @click="userClick" class="hover-box" >《用户协议》</b> 
	</view>
	</view>
  </TnPopup>

</template>

<script lang="ts" setup>
	import { onLoad } from '@dcloudio/uni-app';
	import { ref, reactive, defineEmits } from 'vue'
	import TnPopup from '@/uni_modules/tuniaoui-vue3/components/popup/src/popup.vue'
	import TnButton from '@/uni_modules/tuniaoui-vue3/components/button/src/button.vue'
	import TnAvatar from '@/uni_modules/tuniaoui-vue3/components/avatar/src/avatar.vue'
	import TnAvatarGroup from '@/uni_modules/tuniaoui-vue3/components/avatar/src/avatar-group.vue'
	import TnCheckbox from '@/uni_modules/tuniaoui-vue3/components/checkbox/src/checkbox.vue'
	import TnCheckboxGroup from '@/uni_modules/tuniaoui-vue3/components/checkbox/src/checkbox-group.vue'
	import { userInfo, realUserInfo, reFlushToken,bindPhone  } from '@/api/login'
	import { setToken, setTokenRefCode } from '@/utils/auth'
	
	//绑定父类接口
	const emit = defineEmits(['callParentMethod'])
	const callParentMethod = () => {
		emit('callParentMethod')
	}
	
	const showPopup   = ref(false)
	const selectValue = ref(true)
	const changeClick = ( e ) => {
		console.log("---------changeClick-----------")
		console.log(selectValue.value)
		console.log( e )
	}

	const privateClick = () => {
		uni.navigateTo({
		  url: "/pages/index/privacypolicy/privacypolicy"
		});
	}

	const userClick = () => {
		uni.navigateTo({
		  url: "/pages/index/privacypolicy/privacypolicy"
		});
	}
	
	const gettPhoneNumber = (e) => {
		console.log("===============gettPhoneNumber===================");
		console.log(e);
		showPopup.value = false
		uni.login({
			"provider": "weixin",
			"onlyAuthorize": true, // 微信登录仅请求授权认证
			success: function(res){
				console.log(res );
				const data = { 
							encryptedData: e.detail.encryptedData,
							iv: e.detail.iv,
							code: res.code,
							deviceid: uni.getSystemInfoSync().deviceId,
				}
				console.log( data )
				bindPhone( data ).then(res => {
					console.log( res )
					setTokenRefCode(res.data)
					uni.showToast({
						icon: 'none',
						title: "授权成功",
						duration: 3000 // 持续时间为3000毫秒，即3秒
					})
				}).catch(error => {
					console.log("=========gettPhoneNumber=========================");
					console.log( error )
					uni.showToast({
					icon: 'fail',
					title: "登录失败",
					duration: 3000 // 持续时间为3000毫秒，即3秒
					})
				})
			}
		});
	}
	
	const childMethod = () => {
	   console.log('Child method called');
	   showPopup.value = true
	};
	  
	defineExpose({
	   childMethod
	});

</script>


<style scoped>
	
 

.content {
	border: 0px solid red;
}

.amountview{
 border: 0px solid red;  width:95%;  border-radius: 20rpx; background-color: #EAEEF7; height:100%; display: block; 

}

.btn{
position: absolute; /* 设置为 absolute 进行绝对定位 */
border: 0px solid red;
width: 100%;
height: 80px;
display: flex; 
justify-content: center; 
align-items: center;
}

 .hover-box {
    padding: 3px;
    background-color: #f0f0f0;
    transition: background-color 0.3s; /* 添加过渡动画 */
  }
  
  .hover-box:hover {
    background-color: #01BEFF; /* 鼠标移入时的背景色 */
  }
  
  
</style>
